<template>
  <div class="communityLocation">
    <div class="bar_title">
      <van-search
        v-model="villageName"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="$router.go(-1)"
        shape="round"
      >
      </van-search>
    </div>
    <!-- <div class="current-position-style" @click="locationVillage(currentAddress)">
      <svg-icon icon-class="社区定位" widthW="0.333rem" heightH="0.333rem"></svg-icon>
      <span class="address-text-style">{{ currentAddress }}</span>
      <span class="address-tip-style">GPS定位</span>
    </div> -->
    <div class="history-city-style">
      <p>历史访问社区</p>
      <ul class="city-list-style">
        <li
          v-for="(item, index) in villageHistoryList"
          :key="index"
          class="item-city-style"
          @click="locationVillage(item.name)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="target-list-style">
      <SearchList
        v-show="isShowSearch"
        @searchListSel="searchListSel"
        :villageList="villageList"
        :canReturn="canReturn"
        @returnCommunity="returnCommunity"
        @returnCityList="returnCityList"
      />
      <city-list
        v-show="isShowCity"
        @citySel="citySel"
        :indexList="indexList"
      />
      <county-list
        :list="countyList"
        v-show="showCounty"
        @returnCity="returnCity"
        @countySel="countySel"
      />
      <street-list
        :list="streetList"
        v-show="showStreet"
        @returnCounty="returnCounty"
        @streetSel="streetSel"
      />
      <community-list
        :list="communityList"
        v-show="showCommunity"
        @returnStreet="returnStreet"
        @communitySel="communitySel"
      />
    </div>
  </div>
</template>

<script>
import CityList from "./common/CityList.vue";
import StreetList from "./common/StreetList.vue";
import CommunityList from "./common/CommunityList.vue";
import CountyList from "./common/CountyList.vue";
import SearchList from "./common/SearchList.vue";
import bus from "../../utils/eventBus";
import api from "@/controller/Interface.js";
import houseService from "@/controller/myhouse.js";
import constant from "@/controller/constant.js";
export default {
  name: "CommunityLocation",
  components: {
    CityList,
    StreetList,
    SearchList,
    CountyList,
    CommunityList
  },
  data() {
    return {
      canReturn: true,
      isShowSearch: false,
      isShowCity: true,
      showCounty: false,
      showStreet: false,
      showCommunity: false,
      villageName: "",
      currentAddress: "",
      streetList: [],
      indexList: [],
      countyList: [],
      communityList: [],
      villageList: [],
      villageHistoryList: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    if (localStorage.getItem('historyList')) {
      let arr = JSON.parse(localStorage.getItem('historyList'))
      this.villageHistoryList = arr.slice(0,3)
    }
    this.getRegionList(2);
  },
  methods: {
    getRegionList(level) {
      const data = {
        level: level
      };
      api.region_v1_find_by_level(data).then(res => {
        if (res.code === "0") {
          const data = res.datas;
          let newData = {};
          Object.keys(data)
            .sort()
            .map(key => {
              newData[key] = data[key];
            });
          this.indexList = [];
          for (const key in newData) {
            if (newData.hasOwnProperty(key)) {
              this.indexList.push({
                index: key.toUpperCase(),
                city: newData[key]
              });
            }
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    getCommunityList(regionCode) {
      api.community_community_code_code(regionCode).then(res => {
        if (res.code === "0") {
          this.showStreet = false;
          this.showCommunity = true;
          this.communityList = res.datas;
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    getCountyList(val) {
      const data = {
        parentCode: val.regionCode
      };
      api.region_v1_find_list(data).then(res => {
        if (res.code === "0") {
          switch (val.level) {
            case 2:
              this.isShowCity = false;
              this.showCounty = true;
              this.countyList = res.datas;
              break;
            case 3:
              this.showStreet = true;
              this.showCounty = false;
              this.streetList = res.datas;
              break;

            default:
              break;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    getVillageList(id) {
      houseService.community_neighborhood_region(id).then(res => {
        if (res.code === "0") {
          this.showCommunity = false;
          this.isShowSearch = true;
          this.canReturn = true;
          this.villageList = res.datas;
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    onSearch() {
      const data = {
        name: this.villageName
      };
      api.community_neighborhood_page(data).then(res => {
        if (res.code === "0") {
          this.isShowCity = false;
          this.isShowSearch = true;
          this.canReturn = false;
          this.villageList = res.datas.records;
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    locationVillage(val) {
      bus.$emit("villageName", val);
      this.$router.go(-1);
    },
    citySel(data) {
      this.getCountyList(data);
    },
    returnCity() {
      this.isShowCity = true;
      this.showCounty = false;
    },
    returnCounty() {
      this.showStreet = false;
      this.showCounty = true;
    },
    returnStreet() {
      this.showStreet = true;
      this.showCommunity = false;
    },
    returnCommunity() {
      this.showCommunity = true;
      this.isShowSearch = false;
    },
    returnCityList() {
      this.isShowCity = true;
      this.isShowSearch = false;
      this.villageName = ''
    },
    communitySel(data) {
      this.getVillageList(data.id);
    },
    streetSel(data) {
      this.getCommunityList(data.regionCode);
    },
    countySel(data) {
      this.getCountyList(data);
    },
    searchListSel(data) {
      this.$router.go(-1);
      bus.$emit("villageName", data.name);
    }
  }
};
</script>

<style lang="scss" scoped>
.communityLocation {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  font-size: 16px;
  color: #333333;

  .bar_title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.22667rem;
    line-height: 1.22667rem;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    background-color: #dc4630;
    font-weight: 500;
    font-size: 0.48rem;
    color: #ffffff;
    z-index: 99;

    .van-search {
      background: transparent !important;
      padding: 0.16rem 0.32rem;

      .van-search__content {
        background-color: #f5f5f5;
      }

      .van-cell {
        padding: 0 5px 0 0;
      }

      .van-search__action {
        color: #ffffff;
      }

      .van-search__action:active {
        background: transparent !important;
      }
    }
  }

  .current-position-style {
    height: 52.5px;
    line-height: 52.5px;
    padding: 0 15px;
    background: #ffffff;

    .address-text-style {
      margin-left: 7.5px;
      font-size: 16px;
      color: #333333;
      line-height: 22.5px;
    }

    .address-tip-style {
      font-size: 12px;
      color: #999999;
      margin-left: 10px;
    }
  }

  .history-city-style {
    margin-top: 10px;
    padding: 15px;
    background: #ffffff;

    p {
      font-size: 14px;
      color: #999999;
      line-height: 20px;
    }

    .city-list-style {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .item-city-style {
        margin-top: 5px;
        margin-left: 5px;
        width: 110px;
        height: 36px;
        background: #f5f7fa;
        text-align: center;
        line-height: 36px;
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
</style>
